<template>
  <div>
    <el-table
      :data="courseTableData"
      border
      style="width: 100%;"
      :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold', textAlign: 'center' }"
    >
      <el-table-column label="节次" width="100">
        <template slot-scope="scope">
          <div class="section-label">{{ scope.row.section }}</div>
        </template>
      </el-table-column>
      <el-table-column v-for="(day, index) in days" :key="index" :label="day">
        <template slot-scope="scope">
          <div v-if="scope.row.courses[index]" class="course-card" :style="{ backgroundColor: getRandomColor() }">
            <p>《{{ scope.row.courses[index].courseName }}》</p>
            <p>教师: {{ scope.row.courses[index].nick_name }}</p>
            <p>教室: {{ scope.row.courses[index].classroom }}</p>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getCourseTable} from "@/api/course/myCourseTable";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      courseTableData: [
        {
          section: '1 - 2节',
          courses: new Array(7).fill(null)
        },
        {
          section: '3 - 4节',
          courses: new Array(7).fill(null)
        },
        {
          section: '5 - 6节',
          courses: new Array(7).fill(null)
        },
        {
          section: '7 - 8节',
          courses: new Array(7).fill(null)
        },
        {
          section: '9 - 10节',
          courses: new Array(7).fill(null)
        }
      ],
      colorList: ['#ADD8E6', '#FFFFE0', '#D3D3D3', '#FFB6C1', '#E6E6FA', '#90EE90'] // 浅蓝、浅黄、浅灰、浅粉、浅紫、浅绿
    };
  },
  methods: {
    /** 查询课程表 */
    getCourseTableList() {
      this.loading = true;
      getCourseTable().then(response => {
        this.processCourseData(response.data);
        this.loading = false;
      }).catch(error => {
        console.error('获取课程表数据失败:', error);
        this.loading = false;
      });
    },
    processCourseData(data) {
      // 清空原有的课程数据
      this.courseTableData.forEach(row => {
        row.courses = new Array(7).fill(null);
      });
      // 处理从后端获取的数据并更新 courseTableData
      data.forEach(course => {
        const { courseWeek, courseSequence, courseName, classroom, nickName } = course;
        if (courseWeek >= 0 && courseWeek < 7 && courseSequence >= 0 && courseSequence < 5) {
          this.courseTableData[courseSequence].courses[courseWeek] = {
            courseName,
            classroom,
            nick_name: nickName
          };
        }
      });
    },
    getRandomColor() {
      const randomIndex = Math.floor(Math.random() * this.colorList.length);
      return this.colorList[randomIndex];
    }
  },
  mounted() {
    // 页面加载时调用获取课程表数据的方法
    this.getCourseTableList();
  }
};
</script>

<style scoped>
.course-card {
  background-color: #f9f9f9;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  padding: 10px;
  margin: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-label {
  text-align: center;
  font-weight: bold;
}
</style>
